<template><view class='container'>
  <view class="month_income_head" :style="'background:'+ setting.platformSetting.defaultColor">
    <view class="month_block">
      <image src="https://image1.sansancloud.com/xianhua/2019_12/6/20/5/33_661.jpg?x-oss-process=style/preview_120" class="month_block_icon"></image>
      <picker class="month_block_data" mode="date" :value="time" start="2018-09-01" end="2028-09-01"  @change="bindDateChange" fields="month">
          <view class="picker">
            {{timeStr}}
          </view>
      </picker>
      <!-- <text class="month_block_data">2019年10月</text> -->
      <image src="https://image1.sansancloud.com/xianhua/2019_12/6/20/34/31_914.jpg?x-oss-process=style/preview_120" class="month_block_right_icon"></image>
    </view>
    <view class="income_block">
      <text class="income_block_title">本月{{properties.alias_yongjin||'积分'}}</text>
      <view class="income_data">
        <text>{{curIncome}}</text>
        <text class="line" :style="'background:'+ setting.platformSetting.secondColor"></text>
      </view>
    </view>
  </view>
  <view class="month_income_info">
    <view class="month_chart_block">
      <text class="month_chart_title">近半年个月团队交易额</text>
      <!-- <view class="month_chart_type">
          <view class="month_chart_type_item">
              <view class="month_chart_type_item_img" style="background:#999"></view>
              <view class="month_chart_type_item_text">发放</view>
          </view>
          <view class="month_chart_type_item">
              <view class="month_chart_type_item_img" :style="'background:'+ setting.platformSetting.defaultColor"></view>
              <view class="month_chart_type_item_text">收入</view>
          </view>
      </view> -->
      <view class="month_chart_list">
        <view class="month_chart_item" v-for="(item,index) in dataList" :key="index">
          <view class="bar_chart_block">
            <!-- <view class="bar_chart_figure_item">
                <text class="bar_chart_text" :style="'bottom:'+item.grantRatioNum">{{item.grantItemText}}</text>
                <view class="bar_chart_highly" :style="'background:#999' +';height:'+item.grantRatioNum"></view>
            </view> -->
            <view class="bar_chart_figure_item">
                <text class="bar_chart_text" :style="'bottom:'+item.incomeRatioNum">{{item.incomeItemText}}</text>
                <view class="bar_chart_highly" :style="'background:'+ setting.platformSetting.defaultColor +';height:'+item.incomeRatioNum"></view>
            </view>
          </view>
          <view class="month_time_block">
            <text class="month_time_line"></text>
            <text class="dot"></text>
            <text class="month_time_text">{{item.monthStr}}</text>
          </view>
        </view>
      </view>
      <!-- <text class="spending">本月发放：￥{{curSpending}}</text> -->
      <view class="bottom_line"></view>
    </view>
  </view>
  <!-- <view class="column_list">
    <view class="column_item" data-url="fx_yongjin_list.html?needLogin=1" @tap="tolinkUrl">
      <text class="column_item_text">分项明细</text>
      <image class="column_item_icon" src="https://image1.sansancloud.com/xianhua/2019_1/15/16/33/5_514.jpg"></image>
    </view>
  </view> -->
</view>
</template>

<script>
import { socketFun } from "../../wxcomponents/public/json2Form";
export default {
  data() {
    return {
      dataList:[],
      curIncome:0,
      curSpending:0,
      time:'',
      timeStr:'',
      setting:{},
      properties: "",
      seachData:{dateStr:'',pageSize:5},
    };
  },
  props: {},

  /*onload*/
  onLoad: function (options) {
    // wx.hideTabBar({})
    let that=this;
    that.time=that.getNowTime('rail')
    that.timeStr=that.getNowTime('text')
    let seachData=that.seachData
    seachData.dateStr=that.time+'-01'
    console.warn("======onLoad:options======", options, getApp().globalData.setting);
    that.getMonthDetailFun(seachData);
  },
  onReady: function () {
    wx.setNavigationBarTitle({
      title: (this.properties.alias_yongjin||'积分')+"统计"
    });
  },
  onShow: function () {
    let that=this;
	that.loginState=false;
	that.setData({
        setting:getApp().globalData.setting,
        properties: getApp().globalData.properties,
    })
  },
  /* 分享 app.js862行*/
  onShareAppMessage: function () {
    console.log(getApp().globalData.miniIndexPage);
    return getApp().globalData.shareForFx2(getApp().globalData.miniIndexPage);
  },
  onPullDownRefresh: function () {
    let that = this; // 下拉刷新的时候首先判断存不存在tab
    console.log("下拉");
    that.refreshPage();
    wx.stopPullDownRefresh();
  },
  methods: {
      getNowTime:function(type){
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month ;
        if(type=='text'){
            currentdate = year +'年' + month +'月';
        }
        return currentdate;
      },
      bindDateChange:function(data){
          console.log("===bindDateChange==",data)
          let that=this;
          let time=data.detail.value;
          let timeStr=time.replace('-', '年')+'月';
          let seachData=that.seachData
          // {dateStr:'',eventType:3}
          seachData.dateStr=time+"-01"
          that.setData({
              timeStr:timeStr,
              time:time,
          })
          that.getMonthDetailFun(seachData)
      },
      //获取推广中心，查看是否有资格
      getMonthDetailFun: function (params) {
        console.log('-------月收入统计--------');
        var customIndex = getApp().globalData.AddClientUrl("/wx_find_user_month_group_payed_tongji.html",params);
        var that = this;
        getApp().globalData.showToastLoading('loading');
        wx.request({
          url: customIndex.url,
          header: getApp().globalData.header,
          success: function (res) {
            console.log("===get_fx_detail===", res);
            if (!res.data.errcode||res.data.errcode != -1) {
              let incomeDataList = res.data.relateObj.result;
              let incomeAmountList=[];
              let curIncome=0;
              if(incomeDataList.length!=0){
                  for(let i=0;i<incomeDataList.length;i++){
                      incomeDataList[i]['monthStr']=incomeDataList[i].month+'月';
                      incomeAmountList.push(parseFloat(incomeDataList[i].monthAmount))
                  }
                  curIncome=parseFloat(incomeDataList[incomeDataList.length-1].monthAmount)
                  let incomeMaxNum = incomeAmountList.sort(function(a,b){
                      return b-a;
                  })[0]
                  for(let i=0;i<incomeDataList.length;i++){
                      let baseData=incomeMaxNum
                      incomeDataList[i]['incomeRatioNum']=(incomeDataList[i].monthAmount/Math.ceil(baseData)*100)+'%';
                      incomeDataList[i]['incomeItemText']=parseFloat(incomeDataList[i].monthAmount);
                      // incomeDataList[i]['grantRatioNum']=(grantDataList[i].month_amount/Math.ceil(baseData)*100)+'%';
                  }
                console.log("===maxNum===",incomeMaxNum,incomeDataList)
              }
              that.setData({
                dataList: incomeDataList,
                curIncome:parseFloat(curIncome),
              });
            }
            wx.hideLoading();
          },
          fail: function (res) {
            wx.hideLoading();
            getApp().globalData.loadFail();
          }
        });
      },
    onPageScroll: function (object) {
		console.log('=====positionNotifyer==')
    },

    /* 组件事件集合 */
    tolinkUrl: function (e) {
      console.warn("=======e=======", e);
      let linkUrl = e.currentTarget.dataset.url;
      getApp().globalData.linkEvent(linkUrl);
    },
    setPageName: function (urlStr) {
      let url = urlStr || "";
      let partialsName = "";

      if (url) {
        partialsName = JSON.stringify({
          url: url,
          state: this.showAuthorizationPopup
        });
      }

      this.setData({
        partialsName: partialsName
      });
      console.log("partialsName", this.partialsName);
    },
    refreshPage: function () {
      let that = this;
      console.log("首页刷新");
      that.setPageName();
      wx.showToast({
        title: '加载中...',
        icon: 'none',
        duration: 500
      });
      setTimeout(function () {
        that.setPageName('index');
        getApp().globalData.footerCount = 0;
      }, 500);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>